<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div id="app">
			<div v-if="books.length>0">
				<table>
					<thead>
						<tr>
							<th></th>
							<th>书籍名称</th>
							<th>出版日期</th>
							<th>价格</th>
							<th>购买数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in books">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.time}}</td>
							<td>{{item.price | showPrice}}</td>
							<td>
							<button @click="sub(index)" v-bind:disabled="item.count<=1">-</button>
							{{item.count}}
							<button @click="add(index)">+</button>
							</td>
							<td><button @click="btnClick(index)">删除</button></td>
						</tr>
						
					</tbody>
				</table>
				<h2>总价格：{{totalPrice | showPrice}}</h2>
			</div>
			
			<div v-else>
				<h1>购物车为空</h1>
			</div>
			
		</div>

	</body>
	<script src="../js/vue.js"></script>
	<script src="main.js"></script>
</html>
